<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val.datas.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.off('click')
      // this.chart.dispose()
      var that = this
      var selected = {}
      if (this.chartData.legend) {
        for (let i = 0; i < this.chartData.datas.length; i++) {
          if (this.chartData.datas[i].name) {
            var name = this.chartData.datas[i].name
            if (i < 10) {
              selected[name] = true
            } else {
              selected[name] = false
            }
          }
        }
      }

      var option = {
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          extraCssText: 'white-space: normal; word-break: break-all;',
          formatter: function(p) {
            if (that.chartData.tooltip && that.chartData.tooltip.length > 0) {
              var _html = ''
              that.chartData.tooltip.forEach(v => {
                var value = p.data[v.field]
                if (v.valueFormatter) {
                  value = that.moneyFormat(value, 'w', 2, true) + that.$t('金额单位')
                }
                _html += p.marker + v.name + ': ' + value + '<br>'
              })
              return _html
            } else {
              if (that.chartData.valueFormatter) {
                var count = p.data.count
                var html = ''
                if (count || count === 0) {
                  html = '<br>' + that.$t('投资数量(个)') + ': ' + count
                }
                return p.marker + p.name + html + '<br>' + that.$t('投资金额') + that.$t('金额单位') + ': ' + that.moneyFormat(p.value, 'w', 2, true)
              } else {
                var unit = that.chartData.unit || ''
                return p.marker + p.name + ': ' + p.value + unit
              }
            }
          }
        },
        legend: {
          orient: this.chartData.orient || 'horizontal',
          type: this.chartData.datas.length > 5 ? 'scroll' : '',
          show: this.chartData.legend,
          icon: 'roundRect',
          itemHeight: 8,
          itemWidth: 12,
          top: this.chartData.top || 'auto',
          bottom: 10,
          left: 'center',
          selected: selected,
          formatter: (e) => {
            if (that.chartData.legendFormatter) {
              var ratio = 0
              var value = 0
              if (this.chartData.datas.length > 0) {
                this.chartData.datas.forEach((item) => {
                  if (e === item.name) {
                    ratio = item.ratio || 0
                    if (that.chartData.valueFormatter) {
                      value = that.moneyFormat(item.value, 'w', 2, true) + that.$t('金额单位')
                    } else {
                      value = item.value
                    }
                  }
                })
              }
              if (e.length > 7) {
                e = e.substr(0, 7) + '...'
              }
              const arr = [
                '{a|' + e + '}',
                '{b|' + ratio + '%}',
                '{c|' + value + '}'
              ]
              return arr.join('')
            } else {
              return e
            }
          },
          textStyle: {
            rich: {
              a: {
                width: 100,
                align: 'left',
                fontSize: 12,
                color: '1'
              },
              b: {
                width: 50,
                align: 'left',
                fontSize: 12,
                color: '1'
              },
              c: {
                // width: 30,
                align: 'left',
                fontSize: 12,
                color: '1'
              }
            }
          }
        },
        color: this.chartData.color || ['#434EB8', '#5F69E4', '#509AFD', '#71D5F8', '#14C8C7', '#FDB92C', '#FF8643', '#DB5A52'],
        series: [
          {
            type: 'pie',
            radius: this.chartData.radius || ['35%', '50%'],
            center: this.chartData.center || ['50%', '35%'],
            minAngle: 5,
            itemStyle: {
              borderColor: '#fff',
              borderRadius: this.chartData.borderRadius || 0,
              borderWidth: 3
            },
            label: {
              // formatter: this.chartData.formatter || '{b}: {c}',
              color: '#8F919B',
              fontSize: 12,
              formatter: (params) => {
                if (that.chartData.valueFormatter) {
                  return params.name + ': ' + that.moneyFormat(params.value, 'w', 2, true) + that.$t('金额单位')
                } else {
                  var unit = that.chartData.unit || ''
                  return params.name + ': ' + params.value + unit
                }
              }
            },
            data: this.chartData.datas
          },
          {
            z: 0,
            show: !!this.chartData.radius,
            type: 'pie',
            name: '背景',
            radius: this.chartData.radius || ['32%', '53%'],
            center: this.chartData.center || ['50%', '35%'],
            startAngle: 90,
            hoverAnimation: false,
            clockWise: true,
            silent: true,
            itemStyle: {
              normal: {
                color: '#F8F8F8'
              }
            },
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      }
      this.chart.setOption(option)
      this.chart.on('click', function(params) {
        that.$emit('xData', params.data)
      })
    }
  }
}
</script>
